<template>
  <view class="study-stats">
    <view class="stats-header">
      <text class="stats-title">学习统计</text>
    </view>

    <view class="stats-grid">
      <view class="stat-item blue-bg">
        <view class="stat-icon-container">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 3v18h18"></path>
            <path d="M18 17V9"></path>
            <path d="M13 17V5"></path>
            <path d="M8 17v-3"></path>
          </svg>
        </view>
        <text class="stat-label">总题数</text>
        <text class="stat-value">1,248</text>
      </view>

      <view class="stat-item green-bg">
        <view class="stat-icon-container">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="m22 7-8.5 8.5-5-5L2 17"></path>
            <path d="M16 7h6v6"></path>
          </svg>
        </view>
        <text class="stat-label">正确率</text>
        <text class="stat-value">86%</text>
      </view>

      <view class="stat-item purple-bg">
        <view class="stat-icon-container">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"></circle>
            <polyline points="12 6 12 12 16 14"></polyline>
          </svg>
        </view>
        <text class="stat-label">学习时长</text>
        <text class="stat-value">42h</text>
      </view>

      <view class="stat-item amber-bg">
        <view class="stat-icon-container">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
          </svg>
        </view>
        <text class="stat-label">连续天数</text>
        <text class="stat-value">12</text>
      </view>
    </view>

    <view class="progress-section">
      <view class="progress-header">
        <text class="progress-label">本周学习进度</text>
        <text class="progress-value">68%</text>
      </view>
      <view class="progress-bar">
        <view class="progress-fill"></view>
      </view>
    </view>
  </view>
</template>

<script setup>
// No additional script needed for this component
</script>

<style>
.study-stats {
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.stats-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #1f2937;
}

.stats-link {
  font-size: 24rpx;
  font-weight: 500;
  color: #2563eb;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx;
  border-radius: 16rpx;
}

.stat-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 22rpx;
  color: #4b5563;
  margin-bottom: 4rpx;
}

.stat-value {
  font-size: 28rpx;
  font-weight: 700;
  color: #1f2937;
}

.blue-bg {
  background-color: #eff6ff;
}

.blue-bg .stat-icon-container {
  background-color: #dbeafe;
  color: #2563eb;
}

.green-bg {
  background-color: #ecfdf5;
}

.green-bg .stat-icon-container {
  background-color: #d1fae5;
  color: #059669;
}

.purple-bg {
  background-color: #f5f3ff;
}

.purple-bg .stat-icon-container {
  background-color: #ede9fe;
  color: #7c3aed;
}

.amber-bg {
  background-color: #fffbeb;
}

.amber-bg .stat-icon-container {
  background-color: #fef3c7;
  color: #d97706;
}

.progress-section {
  margin-top: 24rpx;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.progress-label {
  font-size: 22rpx;
  color: #6b7280;
}

.progress-value {
  font-size: 22rpx;
  font-weight: 500;
  color: #2563eb;
}

.progress-bar {
  height: 16rpx;
  background-color: #f3f4f6;
  border-radius: 8rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 68%;
  background: linear-gradient(to right, #3b82f6, #2563eb);
  border-radius: 8rpx;
}
</style>